<template>
  <!-- 控制栏容器 -->
  <el-form inline class="control-bar">
    <el-form-item label="Level">
      <el-select v-model="selectedLevel" placeholder="请选择层级" style="width: 150px">
        <el-option v-for="level in levels" :key="level" :label="`${level} hPa`" :value="level" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="loadData">应用</el-button>
    </el-form-item>
  </el-form>

  <el-card class="weather-map" shadow="hover">
    <template #header>
      <div class="header-container">
        <div class="header-title">
          <el-icon>
            <Sunny />
          </el-icon>
          <span>Specific humidity 分布图</span>
        </div>
        <div class="header-subtitle">
          <el-tag type="info" effect="plain">层级: {{ levelName }} hPa</el-tag>
          <el-tag type="warning" effect="plain">预报时效: +{{ forecastTime }}小时</el-tag>
          <el-tag type="success" effect="plain">有效时间: {{ validTime }}</el-tag>
        </div>
      </div>
    </template>

    <div v-loading="loading" element-loading-text="正在渲染Specific humidity 分布图...">
      <v-chart ref="chartRef" :option="chartOption" :autoresize="true" :onEvents="chartEvents"
        style="height: 600px; width: 100%;" />
    </div>
  </el-card>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import {
  TitleComponent,
  VisualMapComponent,
  TooltipComponent,
  GeoComponent
} from 'echarts/components'
import VChart from 'vue-echarts'
import {
  ElCard, ElTag, ElForm, ElFormItem, ElSelect, ElOption,
  ElButton, ElIcon, ElSkeleton, ElEmpty
} from 'element-plus'
import { Sunny } from '@element-plus/icons-vue'
// import * as echarts from 'echarts';
// import worldData from '/src/world.json';
// echarts.registerMap('world', worldData);

use([CanvasRenderer, TitleComponent, VisualMapComponent, TooltipComponent, GeoComponent])

const selectedLevel = ref(500)
const levels = ref([])
const chartOption = ref(null)
const loading = ref(true)
const error = ref(null)
const chartRef = ref(null)

// 新增的元数据响应式变量
const forecastTime = ref(null)
const validTime = ref('')
const levelName = ref('')

function normalizeLongitude(lon) {
  while (lon < -180) lon += 360
  while (lon > 180) lon -= 360
  return lon
}

function clampLatitude(lat) {
  return Math.min(Math.max(lat, -90), 90)
}

function processData(Data) {
  const seriesData = Data['Values'].map(item => [
    normalizeLongitude(item[0]),
    clampLatitude(item[1]),
    item[2]
  ])
  const pressures = seriesData.map(d => d[2])
  const minPressure = Math.min(...pressures)
  const maxPressure = Math.max(...pressures)

  // 设置元信息
  forecastTime.value = Data['Forecast Time'] || null
  validTime.value = Data['Valid Date'] || ''
  levelName.value = Data['Level'] || selectedLevel.value

  chartOption.value = {
    visualMap: {
      min: minPressure,
      max: maxPressure,
      left: 'center',
      top: 'bottom',
      text: ['kg'], // 单位显示更准确
      calculable: true,
      orient: 'horizontal',
      precision: 6, // 显示小数位数
      formatter: val => val.toExponential(2), // 使用科学计数法
      inRange: {
        color: [
          '#313695', '#4575b4', '#74add1', '#abd9e9',
          '#e0f3f8', '#ffffbf', '#fee090', '#fdae61',
          '#f46d43', '#d73027', '#a50026'
        ]
      }
    },
    geo: [{
      map: 'world',
      roam: true,
      // projection: { type: 'mercator', rotate: [30, -15, 0] },
      zlevel: 2,
      silent: false,
      itemStyle: {
        areaColor: 'transparent',
        borderColor: '#c0c4cc',
        borderWidth: 1
      }
    }],
    series: [{
      name: '气压点',
      type: 'scatter',
      coordinateSystem: 'geo',
      geoIndex: 0,
      data: seriesData,
      symbolSize: 6,
      itemStyle: { opacity: 0.6 }
    }]
  }
}

async function loadLevels() {
  try {
    const res = await fetch('/data/asset/Specific humidity.json')
    if (!res.ok) throw new Error(`请求失败，状态码：${res.status}`)
    const data = await res.json()

    const rawLevels = data.levels || data.Levels || data["Level"] || []
    levels.value = rawLevels.filter(Number.isInteger).sort((a, b) => a - b)

    const targetLevel = levels.value.includes(150) ? 150 : levels.value[0]
    selectedLevel.value = targetLevel || null

    if (!targetLevel) {
      console.warn('150 kg数据不可用，使用默认层级:', selectedLevel.value)
    }
  } catch (err) {
    error.value = `层级加载失败: ${err.message}`
  }
}

async function loadData() {
  try {
    loading.value = true
    error.value = null

    if (!selectedLevel.value) {
      throw new Error('请选择有效层级')
    }

    const fileName = `/data/asset/Specific humidity/Specific humidity ${selectedLevel.value} hPa.json`
    const response = await fetch(fileName)
    if (!response.ok) throw new Error(`请求失败，状态码：${response.status}`)

    const Data = await response.json()
    processData(Data)
  } catch (err) {
    error.value = `数据加载失败: ${err.message}`
    console.error(err)
  } finally {
    loading.value = false
  }
}

const chartEvents = computed(() => ({
  georoam: handleGeoRoam
}))

function handleGeoRoam() {
  const chart = chartRef.value?.getEchartsInstance()
  const geo0 = chart?.getModel().getComponent('geo', 0)
  const center = geo0?.get('center')
  const zoom = geo0?.get('zoom')

  if (center && zoom) {
    chart.setOption({ geo: { 1: { center, zoom } } }, false, false)
  }
}

onMounted(async () => {
  await loadLevels()
  if (selectedLevel.value && !error.value) {
    await loadData()
  } else {
    loading.value = false
  }
})
</script>

<style lang="scss" scoped>
.weather-map {
  background: var(--el-color-white);
  padding: 16px;
  border-radius: var(--el-border-radius-base);
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-title {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 500;
}

.header-title .el-icon {
  margin-right: 8px;
  font-size: 20px;
}

.header-subtitle {
  display: flex;
  gap: 8px;
}
</style>
